<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/flatpickr.css">
    <style>
        .operation-container {
            margin-bottom: 10px;
        }
        .detail-label {
            font-weight: bold;
            width: 100px;
        }
        .detail-value {
            margin-left: 20px;
        }
    </style>
</head>
<body>
<div class="main-wrapper">
    <div class="content-container">
        <div class="layui-card-header">用户信息管理</div>
        <div class="layui-card-body">
            <!-- 搜索区域 -->
            <div class="operation-container">
                <form class="layui-form" id="searchForm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" placeholder="请输入用户名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">手机号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="phone" placeholder="请输入手机号" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">真实姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="realName" placeholder="请输入真实姓名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-inline">
                                <select name="gender">
                                    <option value="">全部</option>
                                    <option value="M">男</option>
                                    <option value="F">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="searchBtn">
                                <i class="layui-icon layui-icon-search"></i>搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary">
                                <i class="layui-icon layui-icon-refresh"></i>重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <!-- 表格区域 -->
            <table id="userTable" lay-filter="userTable"></table>
        </div>
    </div>
</div>

<!-- 内容详情弹窗 -->
<div id="detailDialog" style="display: none; padding: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label detail-label">用户名：</label>
        <div class="layui-input-block detail-value" id="detailUsername"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label detail-label">邮箱：</label>
        <div class="layui-input-block detail-value" id="detailEmail"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label detail-label">手机号：</label>
        <div class="layui-input-block detail-value" id="detailPhone"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label detail-label">真实姓名：</label>
        <div class="layui-input-block detail-value" id="detailRealName"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label detail-label">性别：</label>
        <div class="layui-input-block detail-value" id="detailGender"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label detail-label">出生日期：</label>
        <div class="layui-input-block detail-value" id="detailBirthday"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label detail-label">地址：</label>
        <div class="layui-input-block detail-value" id="detailAddress"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label detail-label">个人描述：</label>
        <div class="layui-input-block detail-value" id="detailDescription"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label detail-label">创建时间：</label>
        <div class="layui-input-block detail-value" id="detailCreateTime"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label detail-label">更新时间：</label>
        <div class="layui-input-block detail-value" id="detailUpdateTime"></div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableOperation">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<script src="/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/flatpickr.js"></script>
<script th:inline="none">
    layui.use(['table', 'form', 'layer', 'laydate'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;
        var laydate = layui.laydate;

        // 初始化日期选择器
        flatpickr('#birthdayPicker', {
            dateFormat: "Y-m-d",
            allowInput: true
        });

        // 初始化表格
        var tableIns = table.render({
            elem: '#userTable',
            url: '/api/info/getAll',
            method: 'post',
            page: true,
            response: {
                statusName: 'code',
                statusCode: 200,
                countName: 'count',
                dataName: 'data'
            },
            cols: [[
                {type: 'checkbox', fixed: 'left', width: 50},
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'username', title: '用户名', width: 150},
                {field: 'email', title: '邮箱', width: 200},
                {field: 'phone', title: '手机号', width: 120},
                {field: 'realName', title: '真实姓名', width: 120},
                {field: 'gender', title: '性别', width: 80, templet: function(d){
                        return d.gender === 'M' ? '男' : d.gender === 'F' ? '女' : '';
                    }},
                {field: 'region', title: '地区', width: 250, templet: function(d){
                        return d.region ? d.region.fullName : '';
                    }},
                {field: 'createTime', title: '创建时间', width: 180, sort: true, templet: function(d){
                        return formatDate(d.createTime);
                    }},
                {fixed: 'right', title: '操作', width: 180, align: 'center', toolbar: '#tableOperation'}
            ]],
            initSort: {
                field: 'id',
                type: 'asc'
            }
        });

        // 日期格式化函数
        function formatDate(date) {
            if (!date) return '';
            const d = new Date(date);
            return d.getFullYear() + '-' +
                (d.getMonth() + 1).toString().padStart(2, '0') + '-' +
                d.getDate().toString().padStart(2, '0') + ' ' +
                d.getHours().toString().padStart(2, '0') + ':' +
                d.getMinutes().toString().padStart(2, '0');
        }

        // 搜索按钮点击事件
        form.on('submit(searchBtn)', function (data) {
            var searchParams = {
                username: data.field.username || null,
                phone: data.field.phone || null,
                realName: data.field.realName || null,
                status: data.field.gender || null
            };

            tableIns.reload({
                where: searchParams,
                page: {curr: 1}
            });
            return false;
        });

        // 表格工具栏事件
        table.on('tool(userTable)', function (obj) {
            var data = obj.data;

            if (obj.event === 'detail') {
                // 显示用户详情
                $('#detailUsername').text(data.username || '-');
                $('#detailEmail').text(data.email || '-');
                $('#detailPhone').text(data.phone || '-');
                $('#detailRealName').text(data.realName || '-');
                $('#detailGender').text(data.gender === 'M' ? '男' : data.gender === 'F' ? '女' : '-');
                $('#detailBirthday').text(formatDate(data.birthday) || '-');
                $('#detailAddress').text((data.region ? data.region.name + ' ' : '') + (data.addressDetail || ''));
                $('#detailDescription').text(data.description || '-');
                $('#detailCreateTime').text(formatDate(data.createTime) || '-');
                $('#detailUpdateTime').text(formatDate(data.updateTime) || '-');

                layer.open({
                    title: '用户详情 - ' + data.username,
                    type: 1,
                    area: ['600px', '650px'],
                    content: $('#detailDialog')
                });
            } else if (obj.event === 'delete') {
                layer.confirm('确定要删除该信息吗？', function (index) {
                    $.ajax({
                        url: '/api/info/delete/' + data.id,
                        type: 'post',
                        success: function (res) {
                            if (res.code === 200) {
                                layer.msg('删除成功');
                                tableIns.reload();
                            } else {
                                layer.msg(res.msg || '删除失败');
                            }
                        },
                        error: function () {
                            layer.msg('删除失败');
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>
</body>
</html>